<template>
  <div>
    <top></top>
    <frame2 title="编辑项目">
      <div class="list">
          <div class="row">
            <div>项目名称</div>
            <div>
              <el-input
                placeholder="请输入内容" show-word-limit
                v-model="name" style="width:60%;" maxlength="60"
                clearable>
              </el-input>
            </div>
          </div>

          <div class="row">
            <div>项目描述</div>
            <div>
              <el-input
                type="textarea"
                autosize show-word-limit
                placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 10}"
                style="width:60%;" maxlength="200"
                v-model="description">
              </el-input>
            </div>
          </div>

        <div class="row">
          <div>从现有成员中选择</div>
          <div>
            <div class="friends">
<!--              表头-->
              <div class="row2" style="background-color:#dcdfe6;">
                <div>用户名称</div><div>是否选择</div>
              </div>
              <div v-for="f in friends" class="row2">
                <div>{{f.name}}</div>
                <div>
                  <el-switch
                    v-model="f.state">
                  </el-switch>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div>增加新成员</div>
          <div style="padding:10px;">
            <div class="email">
              <div v-for="(e,i) in emails">{{e}}<div class="del-btn" @click="deleteEmail(i)">X</div></div>
            </div>
            <div>
              <el-input
                placeholder="输入邮箱"  @input="see"
                v-model="email" maxlength="100" style="width:30%;"
                clearable>
              </el-input>
              <el-button  @click="addEmail" :disabled="isEmailInput"  type="primary" icon="el-icon-plus" circle></el-button>
            </div>

          </div>
        </div>

        <div class="row">
          <div></div>
          <div>
            <el-button type="primary" round>提交</el-button>
          </div>
        </div>

      </div>
    </frame2>
  </div>
</template>

<script>
import Frame2 from "./Frame";
import bottom from "../base/bottom";
import top from "../base/top";
export default {
  name: "ProjectCreate",
  components:{Frame2,top,bottom},
  data(){
    return{
      name: '',
      description: '',
      friends:[{name:"通通",state:false},{name:"老吴",state:false},
        {name:"捷虎",state:true},{name:"文瑞",state:false}],
      emails:["2021114228@qq.com","2021114228@qq.com","2021114228@qq.com"],
      email: '',
      isEmailInput:true,
    }
  },
  methods:{
    deleteEmail(index){
      this.emails.splice(index,index)
    },
    see(){
      console.log(this.email)
      if(!this.email){
        this.isEmailInput = true
      }
      else if(this.email && this.isEmailInput){
        this.isEmailInput = false
      }
    },
    addEmail(){
      this.emails.push(this.email)
      this.email = ''
    }
  }
}
</script>

<style scoped>
.list{
  width:100%;
  padding:10px;
}

/*布局*/
.list .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.list .row > div:first-child{
  width:15%;
  text-align: right;
}
.list .row > div:last-child{
  width:81%;
}

/*用户表*/
.friends .row2{
  width:40%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:30px;
  border-bottom: 1px #dcdfe6 solid;
}
.friends .row2 > div:first-child{
  width:60%;
  padding-left:5px;
}
.friends .row2 > div:last-child{
  width:30%;
}


/*通过邮箱添加*/
.row .email{

}
.row .email > div{
  position: relative;
  display: inline-block;
  height:40px;
  font-size:14px;
  line-height:32px;
  border:1px  #79bbff solid;
  padding:4px;
  margin-right:14px;
  margin-bottom: 10px;
  border-radius: 4px;

  color:#909399;
}

.row .email .del-btn{
  position: absolute;
  width:20px;
  height:20px;
  right:-10px;
  top:-10px;
  font-size:10px;
  line-height: 18px;
  text-align: center;
  color:#79bbff;
  border:1px #79bbff solid;
  border-radius: 10px;
  background-color: white;

  cursor:pointer;
}
</style>
